<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
		<link rel="stylesheet" href="css/common.css"/>
		<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"/>
	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>
				<div th:replace="commons/u-admin-bar::#navbar(currUri='update-user-info')"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='update-user-info')"></div>
				<div class="main-content">
					<section class="section">
						<div class="row">
							<div class="col-12">
									<div class="card card-primary">
										<div class="card-header">
											<div class="float-right">
												<a href="user-info">我的资料</a>

											</div>
											<h5>修改个人信息</h5>
										</div>
										<div class="row">
											<div class="col-3"></div>
											<div class="card-body col-6">
												<form method="post" action="updateUserInfo" onsubmit="return sureSubmit();">

													<div class="form-group">
														<label for="frist_name">昵称</label>
														<input id="frist_name" type="text" class="form-control" name="userName" autofocus required="required"
															   th:value="${session.loginUser.userName}" data-toggle="popover" data-placement="top"
															   data-content="" onblur="checkUserName()">
														<input type="text" class="form-control" th:value="${session.loginUser.userName}" id="frist_name1" style="display: none">
														<span id="userNameError"></span>
													</div>

													<div class="form-group">
														<label for="last_name">微信</label>
														<input id="last_name" type="text" class="form-control" name="wechat" th:value="${session.loginUser.wechat}">
													</div>

													<div class="row">
														<div class="form-group col-6">
															<label for="oldEmail" class="d-block">邮箱</label>
															<input id="oldEmail" type="email" class="form-control" name="email" onblur="checkUserEmail()">
															<input id="oldEmail1"  th:value="${session.loginUser.email}" style="display: none" >
															<span id="userEmailError"></span>
														</div>
														<div class="form-group col-2">
															<label for="emailCode" class="d-block">-</label>
															<input type="button" class="btn btn-secondary" value="获取邮箱验证码" id="emailCode">
														</div>
													</div>

													<div class="form-group">
														<label for="password2" class="d-block">邮箱验证码</label>
														<input id="password2" type="text" class="form-control" name="code">
													</div>

													<div class="form-group">
														<label>职业</label>
														<input type="text" class="form-control" name="career" id="career" th:value="${session.loginUser.career}">
													</div>

													<div class="form-group">
														<label>性别</label>
														<select class="form-control" name="sex" id="sex">
															<option value="0">男</option>
															<option value="1">女</option>
														</select>
													</div>

													<div class="row">

														<div class="form-group col-4">
															<label for="input_province" class="d-block">(地址)省</label>
															<select name="input_province" id="input_province" class="form-control" >
																<option value=""></option>
															</select>
														</div>
														<div class="form-group col-4">
															<label for="input_city" class="d-block">市</label>
															<select name="input_city" id="input_city" class="form-control">
																<option value=""></option>
															</select>
														</div>
														<div class="form-group col-4">
															<label for="input_area" class="d-block">区</label>
															<select name="input_area" id="input_area" class="form-control">
																<option value=""></option>
															</select>
														</div>
													</div>


													<div class="form-group">
														<label>出生年月</label>
														<div class="form-control" >
															<input type="text" class="form-control" id="data" name="bornDate">
														</div>
													</div>

													<div class="form-group">
														<label>个人简介</label>
														<textarea class="form-control" name="info" id="info" th:text="${session.loginUser.info}"></textarea>
													</div>

													<div class="form-group">
														<!--/*@thymesVar id="info" type=""*/-->
														<span th:if="${info !=null}" th:text="${info}" style="color: red"></span>
														<button type="submit" class="btn btn-primary btn-block" >
															提交修改
														</button>
													</div>
												</form>
											</div>
											<div class="col-3"></div>
										</div>
									</div>
								</div>
							</div>
					</section>
				</div>
			<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>


		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>
		
		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
		<script src="js/userInfo.js"></script>
		<script src="js/fileUpload.js"></script>
		<script src="js/address.js"></script>
		<script src="js/bootstrap-datetimepicker.min.js"></script>
		<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>

		<script >
			//时间选择器
			$("#data").datetimepicker({
				format: 'yyyy-mm-dd',
				minView:'month',
				language: 'zh-CN',
				autoclose:true,
			}).on("click",function(){
				$("#data").datetimepicker($("#data").val())
			});

			$(function () {
				var html = "";
				$("#input_city").append(html);
				$("#input_area").append(html);
				$.each(pdata,function(idx,item){
					if (parseInt(item.level) == 0) {
						html += "<option value="+item.code+" >"+ item.names +"</option> ";
					}
				});
				$("#input_province").append(html);

				$("#input_province").change(function(){
					if ($(this).val() == "") return;
					$("#input_city option").remove();
					$("#input_area option").remove();
					//var code = $(this).find("option:selected").attr("exid");
					 var code = $(this).find("option:selected").val();
					code = code.substring(0,2);
					var html = "<option value=''></option>";
					$("#input_area option").append(html);
					$.each(pdata,function(idx,item){
						if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
							html +="<option value="+item.code+" >"+ item.names +"</option> ";
						}
					});
					$("#input_city ").append(html);


				});

				$("#input_city").change(function(){
					if ($(this).val() == "") return;
					$("#input_area option").remove();
					var code = $(this).find("option:selected").val();
					code = code.substring(0,4);
					var html = "<option value=''></option>";
					$.each(pdata,function(idx,item){
						if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
							html +="<option value="+item.code+" >"+ item.names +"</option> ";
						}
					});
					$("#input_area ").append(html);

				});

			});
			//发送验证码只邮箱
			var vercode	 = 0;
			var time = 60;
			var flag = true;   //设置点击标记，防止60内再次点击生效

			//发送验证码
			$('#emailCode').click(function(){
				if  ($("#oldEmail").val()==""){
					$("#userEmailError").text("邮箱不能为空!");
					$("#userEmailError").css("color","red");
					return;
				}
				$(this).attr("disabled",true);
				var userName = $("input[name='userName']").val();
				var email = $("input[name='email']").val();
				if(flag){
					var timer = setInterval(function () {
						if(time == 60 && flag){
							flag = false;
							$.ajax({
								type : 'post',
								async : true,
								url : 'sendCode',
								data : {
									"userName" : userName,
									"email":email,
									"password":""
								},
								dataType:"json",
								success : function(data) {
								}
							});
						}else if(time == 0){
							$("#emailCode").removeAttr("disabled");
							$("#emailCode").val("免费获取验证码");
							clearInterval(timer);
							time = 60;
							flag = true;
						}else {
							$("#emailCode").val(time + " s 重新发送");
							time--;
						}
					},1000);
				}

			});
		</script>

	</body>
</html>
